<template>
	<view class="circle">
		<view class="circle-name">
			<view class="title">圈子名称</view>
			 <up-input
			    placeholder="请输入圈子名称"
			    border="surround"
			    v-model="circle.circle_name"
			    @change="handleName"
			  ></up-input>
			  
		</view>
		<view class="avatar">
			<view class="title">圈子头像</view>	
			<up-upload
				multiple
				:maxCount="1"
				:fileList="circle.avatar"
				@afterRead="afterRead"
				@delete="deletePic"
			></up-upload>
		</view>
		<view class="circle-description">
			<view class="title">圈子简介</view>
			<up-textarea
				adjustPosition
				maxlength="10000"
				v-model="circle.circle_description" 
				placeholder="填写简介,帮助用户更了解你的话题"></up-textarea>
		</view>
		<up-button 	
			color="#d81e06"
			type="primary" 
			shape="circle" 
			text="创建圈子"
			@click="handleCreate"></up-button>
		<up-divider text="创建规则"></up-divider>
		<up-text class="text" type="info" size="14" text="1.名称不超过32个字符，限汉字、字母、数字和下划线"></up-text>
		<up-text class="text" type="info" size="14" text="2.已满18周岁且在创建时完成身份验证和手机号绑定的用户申请圈子后可立即开通"></up-text>
		<up-text class="text" type="info" size="14" text="3.未满18周岁用户申请圈子需人工审核"></up-text>
		<up-text class="text" type="primary" size="14" text="查看详细创建规则>"  align="center" href="https://www.uviewui.com" ></up-text>
	</view>
</template>

<script lang="ts" setup name="">
	import { reactive,ref } from 'vue'
	import {postNewCircle} from '../../apis/circle'
	let circle = reactive({
		circle_name:'',
		circle_description:'',
		avatar:[],
	})
	function handleName(){
	}
	//删除图片
	function deletePic(event) {
		circle.avatar.splice(event.index, 1);
	}

	// 新增图片
	function afterRead (event){
		circle.avatar = [].concat(event.file)
	}
		
	async function handleCreate(){
			
		if(circle.circle_name && circle.avatar &&circle.circle_description){
			console.log(circle);
			await postNewCircle(circle);
		}
		else if(!circle.circle_name){
			error('请填写圈子名称');
			
		}
		else if(!circle.avatar.length){
			error('请填写圈子头像')
		}
		else if(!circle.circle_description){
			error('请填写圈子简介');
		}
		function error(val){
			uni.showToast({
				title:val,
				icon: 'error',
				duration: 2000
			})
		}
	}
</script>

<style scoped lang="scss">
		
	.circle{
		background-color: white;
		padding: 30upx;

		.title{
			margin-bottom: 20upx;
		}	
		.avatar{
			margin: 30upx 0;
		}
		.circle-description{
			margin-bottom: 30upx;
		}
	}
</style>